<template>
  <el-card class="swiper-container">
    <template #header>
      <div class="header">
        <el-input
          style="width: 200px; margin-right: 10px"
          placeholder="请输入名称"
          v-model="params.name"
          size="small"
          clearable
        />
        <el-cascader
          v-model="params.parentId"
          :options="options"
          placeholder="上级分类"
          clearable
          :props="cascaderProps"
          size="small"
          style="width: 200px; margin-right: 10px"
        ></el-cascader>
        <el-button
          type="primary"
          size="small"
          icon="el-icon-search"
          @click="getList"
          >查询</el-button
        >
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="handleAdd"
          >增加</el-button
        >
      </div>
    </template>
    <el-table
      v-loading="loading"
      row-key="_id"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column label="封面" width="200">
        <template #default="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.cover"
            :preview-src-list="[scope.row.cover]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="_id" label="编号"> </el-table-column>
      <el-table-column prop="title" label="标题"> </el-table-column>
      <el-table-column prop="workName" label="名称"> </el-table-column>
      <el-table-column prop="order" label="排序值"> </el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="scope">
          <a
            style="cursor: pointer; margin-right: 10px"
            @click="handleEdit(scope.row._id)"
            >修改</a
          >
          <el-popconfirm
            title="确定删除吗？"
            @confirm="handleDeleteOne(scope.row._id)"
          >
            <template #reference>
              <a style="cursor: pointer">删除</a>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--总数超过一页，再展示分页器-->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="pageNo"
      @current-change="changePage"
    />
  </el-card>
  <DialogAddWork
    ref="addGood"
    :reload="getList"
    :type="type"
    :options="options"
  />
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElMessage } from "element-plus";
import DialogAddWork from "@/components/DialogAddWork.vue";
import axios from "axios";
export default {
  name: "Swiper",
  components: {
    DialogAddWork,
  },
  setup() {
    const multipleTable = ref();
    const addGood = ref();
    const options = ref([]);
    const state = reactive({
      cascaderProps: {
        value: "_id",
        label: "name",
      }, // 树形props
      loading: false,
      tableData: [], // 数据列表
      params: {
        name: "",
        parentId: undefined,
      },
      total: 0, // 总条数
      pageNo: 1, // 当前页
      pageSize: 10, // 分页大小
      type: "add", // 操作类型
    });
    onMounted(() => {
      getList();
      getType();
    });
    // const stingfyType = (id) => {
    //   let res = {}
    //   options.value.find((item) => {
    //     const res_2 = item.children.find(item2 => {
    //       return item2._id === id
    //     })
    //     res = res_2
    //     return res_2
    //   });
    //   console.log(res)
    //   return res ? res.name : "";
    // };
    const getType = () => {
      axios.get("/api/workType/all2").then((res) => {
        options.value = res.data;
      });
    };
    // 获取轮播图列表
    const getList = () => {
      state.loading = true;
      if (Array.isArray(state.params.parentId)) {
        state.params.parentId = state.params.parentId[state.params.parentId.length - 1];
      }
      axios
        .get("/api/work", {
          params: {
            pageNo: state.pageNo,
            pageSize: state.pageSize,
            ...state.params,
          },
        })
        .then((res) => {
          state.tableData = res.data.data;
          state.total = res.data.pager.Total;
          // state.currentPage = res.currPage;
          state.loading = false;
        })
        .catch((err) => {
          state.loading = false;
        });
    };
    // 添加轮播项
    const handleAdd = () => {
      state.type = "add";
      addGood.value.open();
      addGood.value.resetForm();
    };
    // 修改轮播图
    const handleEdit = (id) => {
      state.type = "edit";
      addGood.value.open(id);
    };
    // 单个删除
    const handleDeleteOne = (id) => {
      axios
        .delete("/api/work", {
          params: {
            id,
          },
        })
        .then(() => {
          ElMessage.success("删除成功");
          getList();
        });
    };
    const changePage = (val) => {
      state.pageNo = val;
      getList();
    };
    return {
      ...toRefs(state),
      multipleTable,
      addGood,
      handleAdd,
      handleEdit,
      handleDeleteOne,
      getList,
      changePage,
      options,
      // stingfyType,
    };
  },
};
</script>

<style scoped>
.swiper-container {
  min-height: 100%;
}
.el-card.is-always-shadow {
  min-height: 100% !important;
}
</style>